<template>
  <div class="appointment">
    <Header titleValue="我的预约" :showLeft="false" :clickLeft="back"></Header>
    <div class="appointContent" v-if="informationList.length > 0">
      <div
        class="appointList"
        :class="{ gray: item.dealStatus == 4 || item.validStatus == 0 }"
        v-for="item in informationList"
        :key="item.id"
      >
        <div class="signTitle" style="justify-content: space-between;border-color: #e6e6e6;">
          <div style="display: flex;align-items: center;">
            <img
              style="width: 20px;margin-right: 8px;"
              v-if="item.validStatus == 0 || item.dealStatus == 4"
              src="~@/assets/images/regiconcancel.png"
              alt=""
            />
            <img style="width: 20px;margin-right: 8px;" v-else src="~@/assets/images/regAppoint.png" alt="" />
            <span style="font-size: 16px;" class="title">{{ item.departName }}</span>
          </div>
          <img
            style="width: 67px;"
            v-if="item.dealStatus == 0 && item.validStatus == 1"
            src="~@/assets/images/regSuccess.png"
            alt=""
          />
          <img
            style="width: 67px;"
            v-if="item.dealStatus == 1 && item.validStatus == 1"
            src="~@/assets/images/regservicecomplate.png"
            alt=""
          />
          <img style="width: 67px;" v-if="item.validStatus == 0" src="~@/assets/images/regcancel.png" alt="" />
          <img
            style="width: 67px;"
            v-if="item.dealStatus == 2 && item.validStatus == 1"
            src="~@/assets/images/reqresvernum.png"
            alt=""
          />
          <img
            style="width: 67px;"
            v-if="item.dealStatus == 3 && item.validStatus == 1"
            src="~@/assets/images/reqpending.png"
            alt=""
          />
          <img
            style="width: 67px;"
            v-if="item.dealStatus == 5 && item.validStatus == 1"
            src="~@/assets/images/regovertime.png"
            alt=""
          />
          <img
            style="width: 67px;"
            v-if="item.dealStatus == 6 && item.validStatus == 1"
            src="~@/assets/images/regyiquhao.png"
            alt=""
          />
        </div>
        <div class="appointText" style="margin-top:6px">
          <span class="appointLeft">地址</span>
          <span class="appointRight field">{{ item.address }}</span>
        </div>
        <div class="appointText">
          <span class="appointLeft">预约时间</span>
          <span class="appointRight field"
            >{{ item.reserveDate }} {{ item.intervalBeginTime }}-{{ item.intervalEndTime }}</span
          >
        </div>
        <div class="appointText">
          <span class="appointLeft">预约码</span>
          <span class="appointRight field">{{ item.id }}</span>
        </div>
        <div class="appointText">
          <span class="appointLeft">排队码</span>
          <span class="appointRight field">{{ item.reserveCode }}</span>
        </div>
        <div class="appointText" style="padding-bottom:8px;border-bottom: 0.5px solid #E6E6E6">
          <span class="appointLeft">预约业务</span>
          <span class="appointRight field">{{ item.serviceTypeName }}</span>
        </div>
        <!-- 服务评价/取消预约 -->
        <div class="appCan" v-if="item.dealStatus == '0' && item.validStatus == '1'" >
          <div class="appointBtn" @click="confirmCancelReserva(item)">取消预约</div>
          <div class="appointBtn" style="margin-left:10px" @click="toQueuing(item)">取号</div>
        </div>
        <div class="appCan" v-if="item.dealStatus == '1' && item.showRating == false" @click="toRating(item)">
          <div class="appointBtn">服务评价</div>
        </div>
        <div style="padding: 16px 0 5px;" v-show="item.showRating">
          <!-- 点击服务评价显示 -->
          <div class="appWrite" v-show="!item.israting">
            <div class="appSubmit">
              <div class="appointBtn" style="width:64px;text-align:center;" @click="submitRating(item)">提交</div>
            </div>
            <div class="appserText">
              <div class="appStar">
                <div style="width:70px;display:block">服务等级<span style="width:6px;margin: -6px 0px 0 3px;color:red">*</span></div>
                <van-rate
                  v-model="item.ratingLevel"
                  :size="25"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                  style="flex: 1;justify-content: space-between;"
                />
              </div>
              <div style="position:relative;margin-top: 13px">
                <input
                  class="appInput"
                  type="text"
                  maxlength="50"
                  v-model="item.ratingContent"
                  placeholder="点击添加评价"
                />
                <span style="position: absolute;right: 5px;top: 8px;">{{ item.ratingContent.length || 0 }} / 50</span>
              </div>
            </div>
          </div>
          <!-- 展示服务评价内容 -->
          <div class="appserText" v-show="item.israting">
            <div class="appStar">
              <span style="margin-right:16px">服务等级</span>
              <van-rate
                v-model="item.ratingLevel"
                :count="item.ratingLevel"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                gutter="21"
                readonly
              />
            </div>
            <div>{{ item.ratingContent }}</div>
          </div>
        </div>
      </div>
    </div>
    <NoData tipsText="您还没有预约信息哦！" v-if="init == false && informationList.length == 0"/>
  </div>
</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/toast/style';
import 'vant/lib/rate/style';
import 'vant/lib/dialog/style';
import { Toast, Rate, Dialog } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Header from '@/components/Header.vue';
import NoData from '@/components/NoData.vue';
Vue.use(Rate);
Vue.use(Toast);
Vue.use(Dialog);
Component.registerHooks(['beforeRouteUpdate', 'beforeRouteLeave', 'beforeRouteLeave']);
@Component({
  components: { Header,NoData },
})
export default class MyAppoint extends Vue {
  lat: any = '';
  lng: any = ''; //定位失败时默认天安门
  openId: any = '';
  customerPhone: any = '';
  informationList: any = [];
  init: boolean = true;
  mounted() {
    this.openId = sessionStorage.getItem('openId');
    // Toast.loading({
    //   duration: 0,
    //   message: '加载中...',
    //   forbidClick: true,
    // });
    if(this.openId){
      this.isOneLoad();
    }
  }
  created(){
    (document.querySelector('html') as any).style.height= '100%';
    this.lng = this.$route.query.longitude; 
    this.lat = this.$route.query.latitude;
  }
  beforeDestroy(){
    (document.querySelector('html') as any).style.height= 'auto';
  }
  back(){
    this.$router.push({path: '/mainPage',});
  }
  //查询注册用户的手机号
  isOneLoad() {
    var _this = this;
    cloudApi
      .isOneLoad({
        openId: this.openId,
      })
      .then(function(res: any) {
        if (res.data && res.data.code == '9999') {
          // Toast.clear();
          //是第一次进入
        } else {
          _this.customerPhone = res.data.phone;
          _this.getMyReservaList();
        }
      });
  }
  //我的预约列表
  getMyReservaList() {
    var _this = this;
    cloudApi
      .inquireAbout({
        customerPhone: this.customerPhone,
      })
      .then(function(res: any) {
        _this.init = false;
        // Toast.clear();
        if(res.data.code=='0000'){
          res.data.informationList.forEach(function(item: any) {
            // dealStatus:0新预约，1已结束，2已叫号，3办理中， 4已过期, 5自动过期, 6已取号
            if (item.dealStatus == '1') {
              if (!item.ratingContent && !item.ratingLevel) {
                item.israting = false; //未评价
                item.showRating = false;
              } else {
                item.showRating = true;
                item.israting = true; //已评价
              }
            }
            if (item.dealStatus == 0 && item.validStatus == 1) {
              //预约成功
              item.icon = '~@/assets/images/regAppoint.png';
            } else if (item.dealStatus == 1) {
              // 服务完成
              item.icon = '~@/assets/images/regiconcancel.png';
            }
            item.ratingLevel = item.ratingLevel || 0;
            if(item.serviceType == '01'){
              item.serviceTypeName = '承保';
            } else if(item.serviceType == '02'){
              item.serviceTypeName = '理赔';
            }
          });
          _this.informationList = res.data.informationList;
        }else{
          Dialog.confirm({
              title: '温馨提示',
              message: res.data.message,
              confirmButtonColor: '#009B63',
            })
            return; 
        }
      });
  }
  //预约评价
  submitRating(item: any) {
    // Toast.loading({
    //   duration: 0,
    //   message: '加载中...',
    //   forbidClick: true,
    // });
    var _this = this;
    cloudApi
      .evaluate({
        ratingContent: item.ratingContent,
        ratingLevel: item.ratingLevel,
        reserveCode: item.reserveCode,
        id: item.id,
      })
      .then(function(res: any) {
        // Toast.clear();
        if (res.data.code === '0000') {
          item.israting = true;
        }else{
          Toast(res.data.message);
        }
      });
  }
  confirmCancelReserva(item:any){
    let _this = this;
    Dialog.confirm({
      title: '温馨提示',
      message: '确认取消预约？',
      confirmButtonColor: '#009B63',
    }).then(() => {
      _this.toCancelReserva(item)
    });
  }
  //取消预约
  toCancelReserva(item: any) {
    // Toast.loading({
    //   duration: 0,
    //   message: '加载中...',
    //   forbidClick: true,
    // });
    var _this = this;
    cloudApi
      .cancel({
        id: item.id,
        reserveCode: item.reserveCode,
      })
      .then(function(res: any) {
        // Toast.clear();
        if (res.data.code == '0000') {
          _this.getMyReservaList();
        }else{
          Dialog.confirm({
            title: '温馨提示',
            message: res.data.message,
            confirmButtonColor: '#009B63',
          })
          return;
        }
      });
  }
  //去取号
  toQueuing(item: any){
    var _this=this
    _this.$router.push({
        path: 'Queuing',
        query: {
          unionId: sessionStorage.getItem('unionId'),
          openId: sessionStorage.getItem('openId'),
          longitude: String(_this.lng),
          latitude: String(_this.lat),
          departId: String(item.departId),
        },
      });
  }
  //去评价
  toRating(item: any) {
    this.informationList.forEach((ele: any) => {
      if(ele.id == item.id){
        ele.showRating = true;
      }else {
        ele.showRating = false;
      }
    });
  }
  beforeRouteLeave (to:any, from:any, next:any) {
    if(to.name != 'home'){
      if(to.name == 'Queuing'){
        this.toQueuing
      }else{
        next({path: '/'})
        return
      }
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.appointment {
  height: 100%;
}
</style>
